<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" autoFlush="false" buffer="1028kb"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="v" value="${TIME}"/>
<link rel="stylesheet" type="text/css" href="${ctx}/resource/plugins/jcrop/jquery.Jcrop.css?v=${v}"/>
<script type="text/javascript" src="${ctx}/resource/plugins/jquery.ajaxfileupload.js?v=${v}"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/jcrop/jquery.Jcrop.js?v=${v}"></script>

<style type="text/css">
.UINFO p{padding-right: 10px;line-height: 35px;}
.UINFO p:hover{background-color: #E8F2FE;color: #1F4A7A;font-weight: bold;cursor: pointer;}
.UINFO .pactive{border-right: 3px solid green;margin-right: -2px;color: green;font-weight: bold;}
.UINFO .tab{border: none;border-right: 1px dashed #CDCDD1;}
.UINFO input[type=text], .UINFO input[type=file]{width: 250px;}
.UINFO input[type=radio], .UINFO input[type=checkbox]{width: 30px;}
.UINFO select{width: 100px;}
.UINFO table tr td:first-child{text-align: right;width: 120px;}
</style>

<div class="_P10 clear UINFO" style="height: 100%">
	<div class="g-4-24 clear" style="height: inherit;">
		<div class="_MR5 TAR tab _white" target='auto' style="height: inherit;">
			<p for="tabUI_1" class="pactive">个人资料</p>
			<p for="tabUI_2">联系方式</p>
			<p for="tabUI_3">修改登录密码</p>
			<p for="tabUI_4">修改头像图片</p>
			<p for="tabUI_5">个人隐私设置</p>
			<p for="tabUI_6">邮件提醒设置</p>
			<p for="tabUI_7">绑定第三方登录</p>
		</div>
	</div>
	<div class="g-20-24">
		<div tab="tabUI_1">
			<table class="_table" style="border: none;">
				<tr>
					<td>登录帐号</td>
					<td><input type="text" value='563930552@qq.com' readonly="readonly" /><a href="#" class="_ML20">更改登录账号</a></td>
				</tr>
				<tr>
					<td>昵称
						<div class='hui _LH15'>(不能超过10个字)</div>
					</td>
					<td><input type="text" value='jweb' /></td>
				</tr>
				<tr>
					<td>性别
						<div class='hui _LH15'>(只能修改1次)</div>
					</td>
					<td><label style="width: 123px; display: inline-block;"><input type="radio" name='sex'>男</label> <label
						style="width: 123px; display: inline-block;"><input type="radio" name='sex'>女</label>
				</tr>
				<tr>
					<td>出生年月</td>
					<td><select></select>-<select></select>-<select></select>-</td>
				</tr>
				<tr>
					<td>居住地</td>
					<td><select></select>-<select></select></td>
				</tr>
				<tr>
					<td>个性签名
						<div class='hui _LH15'>(不超过100字)</div>
					</td>
					<td><textarea rows="3" cols=""></textarea></td>
				</tr>
			</table>
		</div>
		<div class="hide" tab="tabUI_2">
			<table class="_table" style="border: none;">
				<tr>
					<td>联系电话<div class='hui _LH15'>(非登录账号)</div>	
					<td><input type="text" value='' /></td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td>邮箱地址 <div class='hui _LH15'>(非登录账号)</div>	
					</td>
					<td><input type="text" value='' /></td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td>QQ</td>
					<td><input type="text" value='' /></td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td>我的其他网站<div class='hui _LH15'>(多个请用逗号分隔)</div>
					</td>
					<td><textarea rows="2" cols="" style=""></textarea></td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
			</table>
		</div>
		<div class=" hide" tab="tabUI_3">
			<table class="_table" style="border: none;">
				<tr>
					<td>旧的登录密码</td>
					<td><input type="text" value='' /></td>
				</tr>
				<tr>
					<td>新密码</td>
					<td><input type="text" value='' /></td>
				</tr>
				<tr>
					<td>再次输入新密码</td>
					<td><input type="text" value='' /><a href="#" class="_ML20">忘记登录密码 »</a></td>
				</tr>
			</table>
		</div>
		<div class="_P10 hide" tab="tabUI_4">
			<label>图片文件(不能超过1024k)： </label> 
			<a href="#" class="file"><span>1.选择文件</span><input name="UFile1" id="UFile1" type="file" accept=".jpg,.png" onchange="fileChange(this)" /></a>
			<div class="hide TAC _PT10">
				<img alt="" src="" name="UFileImg" class="UFileImg" style="box-shadow:0px 0px 10px #343434;"/>
				<form id='form_save' action="" style='display:none;'>
					<input type='hidden' id='img_minW' name='minW' value='0'/>
					<input type='hidden' id='img_minH' name='minH' value='0'/>
					<input type='hidden' id='img_top' name='top' value='0'/>
					<input type='hidden' id='img_left' name='left' value='0'/>
					<input type='hidden' id='img_top' name='top' value='0'/>
					<input type='hidden' id='img_width' name='width' value='0'/>
					<input type='hidden' id='img_height' name='height' value='0'/>
				</form>
			</div>

		</div>
		<div class="_P10 hide" tab="tabUI_5">
			<table class="_table _Htable" style="border: none;">
				<tr>
					<td style="width: 70%;text-align: left;">对外显示我的所有"发帖"</td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td style="text-align: left;">对外显示我对"帖子"的评论</td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td style="text-align: left;">对外显示我对"新闻"的评论</td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td style="text-align: left;">对外显示我的"动弹"</td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
				<tr>
					<td style="text-align: left;">对外显示我的"个人主页"</td>
					<td><label><input type="checkbox" />对外公开</label></td>
				</tr>
			</table>
		</div>
		<div class="_P10 hide" tab="tabUI_6">
			<div class='hui TAC' style="line-height:200px;">(~正在开发中~)</div>
		</div>
		<div class="_P10 hide" tab="tabUI_7">
			<div class='hui TAC' style="line-height:200px;">(~正在开发中~)</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var jcrop_api;
	function fileChange(obj) {
		var val = $(obj).val();
		var size=$(obj)[0].files[0].size / 1024.00;
		if(size>=1024){
			showMsg("图片文件(不能超过1024k)",'error');
			return false;
		}
		$(".alertLoad").parent().fadeIn();
		$(obj).prev().text("1.选择文件:" + val.substring(val.lastIndexOf('\\')));
		$.ajaxFileUpload({
			url : '${ctx}/public/fileUpload', //用于文件上传的服务器端请求地址
			secureuri : false, //一般设置为false
			fileElementId : "UFile1", //文件上传控件的id属性  <input type="file" id="file" name="file" /> 注意，这里一定要有name值   
			//data : $("form").serialize(),表单序列化。指把所有元素的ID，NAME 等全部发过去 
			dataType : 'json',//返回值类型 一般设置为json
			complete : function() {//只要完成即执行，最后执行
				//alert("complete");
			},success : function(data, status){ //服务器成功响应处理函数
				$(".alertLoad").parent().hide();
				if(data.retCode==1){
					$(".UINFO .UFileImg").parent().fadeIn(); 
					if(typeof(jcrop_api)=="undefined"){
						$(".UINFO .UFileImg").Jcrop({ 
							aspectRatio:1,
							onChange: showCoords,
							onSelect: showCoords 
						},function(){
						    jcrop_api = this;
						 });
					} 
					jcrop_api.setImage("http://localhost/cdn/"+data.obj+"?t="+new Date().getTime());
					jcrop_api.animateTo([200,100,400,300]);  
				}else{
					showMsg(data.retMsg,'error');
				}
			},error : function(data, status, e){//服务器响应失败处理函数
				alert(e);
			}
		})
	}
	function showCoords(c){
		$('#img_left').val(c.x);
		$('#img_top').val(c.y);
		$('#img_width').val(c.w);
		$('#img_height').val(c.h);
	};
	function displayProp(obj){    
	    var names="";       
	    for(var name in obj){       
	       names+=name+"\n";  
	    }  
	    alert(names);  
	}  
</script>